<template>
	<view class="">
		<view class="tab_bar">
			<view :class="{tab_bar_item:true,tab_bar_item_activity:tab_index == 1}" @click="setTab(1)">
				客户
			</view>
			<view :class="{tab_bar_item:true,tab_bar_item_activity:tab_index == 2}" @click="setTab(2)">
				供应商
			</view>
		</view>
		<view class="lisis" v-for="(item,index) in 9">
			<uv-swipe-action>
				<uv-swipe-action-item :options="options">
					<view class="swipe-action uv-border-top uv-border-bottom">
						<view class="swipe-action__content">
							<view class="lisis_item">
								姓名
							</view>
						</view>
					</view>
				</uv-swipe-action-item>
			</uv-swipe-action>
		</view>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				tab_index: 1,
				options: [{
					text: '编辑',
					style: {
						backgroundColor: '#FCA238'
					}
				},{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}]
			}
		},
		methods: {
			async get_datas(){
				// let resultData = await this.$api.
			},
			dataClick(e) {
				console.log('所点击的列表索引：', e.index)
				console.log('所点击的按钮数据：', e.item)
			},
			setTab(index) {
				if (index != this.tab_index) {
					this.tab_index = index
				}
			}
		}
	}
</script>

<style>
	.tab_bar {
		width: 750rpx;
		display: flex;
		height: 66rpx;
		align-items: center;
		border-bottom: 1rpx solid #EEE;
	}

	.tab_bar_item {
		flex: 1;
		text-align: center;
		font-size: 28rpx;
	}

	.tab_bar_item_activity {
		color: red;
	}
	
	.lisis_item{
		height: 88rpx;
		line-height: 88rpx;
		padding-left: 32rpx;
		padding-right: 32rpx;
		width: 686rpx;
		border-bottom: 1rpx solid #CCC;
		font-size: 28rpx;
	}
</style>